<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;">
				收費計價
			</view>
			<view :class="{'menu-btn':price.length==0,'menu-btn-active':price.length>0}" @click="savePrice">
				儲存
			</view>
		</view>
		<view style="display: flex;justify-content: space-between;margin-top: 48rpx; padding: 48rpx 32rpx;align-items: center;">
			<view style="font-size: 40rpx;">NT$</view>
			<view style="width: 340rpx;background-color: #FFF;padding: 28rpx 24rpx;border-radius: 24rpx;">
				<u--input
				    placeholder="請輸入金額"
				    border="none"
					type="number"
					fontSize="24rpx"
				    v-model="price"
				  ></u--input>
			</view>
			<view>
				<view @click="showPicker=true" style="background-color: #FFF;display: flex;justify-content: center;border-radius: 24rpx;padding: 28rpx 24rpx;gap:12rpx;">
					<view style="font-size: 24rpx;line-height: 46rpx;">{{unitString}}</view>
					<u--image
						src="/static/images/icon/down-icon.png"
						width="48rpx"
						height="48rpx"
					></u--image>
				</view>
				<u-picker 
					:show="showPicker" 
					:columns="columns"
					title="計價單位"
					confirmText="選擇"
					confirmColor="#27C5D6"
					cancelText="取消"
					cancelColor="#808690"
					itemHeight="64"
					keyName="label"
					@confirm="confirm"
					@close="showPicker=false"
					@cancel="showPicker=false"
					@change="changeHandler"
				></u-picker>
			</view>
		</view>
		<view style="padding:0 32rpx;color: #6A707C;font-size: 22rpx;line-height: 160%;">
			請輸入您的服務費用，請確保價格合理並符合服務內容。避免使用非數字字元、空格與標點符號（如 @、#、$ 等）
		</view>
		
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				price:'',
				nums:1,//1天，1小時
				unitValue:1,//1小時，2天，3單次
				unitString:'1小時',
				showPicker:false,
				columns:[
					[{id:1,label:'小時'},{id:2,label:'天'},{id:3,label:'單次'}],
					[{id:1,label:'1小時'},{id:2,label:'2小時'},{id:3,label:'3小時'},{id:4,label:'4小時'},{id:5,label:'5小時'},{id:6,label:'6小時'}]
				],
				columnData: [
					[{id:1,label:'1小時'},{id:2,label:'2小時'},{id:3,label:'3小時'},{id:4,label:'4小時'},{id:5,label:'5小時'},{id:6,label:'6小時'}],
					[{id:1,label:'1天'},{id:2,label:'2天'},{id:3,label:'3天'}],
					[{id:1,label:'1筆'}]
				]
			}
		},
		onLoad(option) {
			
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			confirm(e){
				console.log('confirm', e)
				this.nums = e.value[1].id;
				this.unitValue = e.value[0].id;
				this.unitString = e.value[1].label;
				this.showPicker = false;
			},
			changeHandler(e){
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			savePrice(){
				if( this.price.length == 0 ){
					return;
				}
				let str = this.price+' NT$/' + this.unit;
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptData', { data:str,price:this.price,unitValue:this.unitValue,nums:this.nums,unit:this.unitString }); // 发送数据
				uni.navigateBack(); // 关闭页面
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
		
		.menu-btn{
			color: #BEC0C5;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
		.menu-btn-active{
			color: #27C5D6;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
	}
	
</style>
